<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1" @click="allCourse">全部课程</el-menu-item>
      <el-menu-item index="2" @click="open(2)">审核通过</el-menu-item>
      <el-menu-item index="3" @click="open(3)">审核中</el-menu-item>
      <el-menu-item index="4" @click="open(4)">审核失败</el-menu-item>
      <el-button type="danger" @click="handleAdd" plain>添加按钮</el-button>
    </el-menu>
    <div>
      <template>
        <el-table
          :data="tableData"
          style="width: 100%">

          <el-table-column
            prop="courseImage"
            label="封面"
            width="180">
            <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.courseImage"
              fit="contain"></el-image>
            </template>
          </el-table-column>

          <el-table-column
            prop="courseName"
            label="课程信息"
            width="190">
          </el-table-column>
          <el-table-column
            prop="courseisfire"
            label="是否免费">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.courseisfire===0">免费</el-tag>
              <el-tag v-if="scope.row.courseisfire>0">收费</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="price"
            label="价格">
            <template slot-scope="scope">
              <span>原价:{{scope.row.coursePrice}}</span><br/>
              <span>会员价:{{scope.row.courseVprice}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态">
            <template slot-scope="scope">
            <el-tag v-if="scope.row.status===2">未审核</el-tag>
            <el-tag v-else>已审核</el-tag>
          </template>
          </el-table-column>
          <el-table-column
            prop="putWay"
            label="上下架">
            <template slot-scope="scope">
              <el-button type="primary" plain :disabled="scope.row.status===0 ? false:true">下架</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <router-link :underline="false" :to="{path:'/editCourse',query:{ kid: scope.row.kid }}">修改</router-link><br>
              <router-link :underline="false" :to="{path:'/chapterManager',query: {kid: scope.row.kid}}">章节管理</router-link><br>
<!--              <router-link :underline="false" to="/editCourseDetail">删除</router-link><br>-->
              <el-link :underline="false" @click.native.prevent="handleDelete(scope.row)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageAndlike.currentPage"
            :page-sizes="[2, 4, 6, 8]"
            :page-size="pageAndlike.sizePage"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageAndlike.totalPage">
          </el-pagination>
        </div>

      </template>
    </div>


  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
// let courseInfo = [{
//   id:"",
//   cover:"http://meltange.oss-cn-beijing.aliyuncs.com/aaa/123.jpg",
//   title:"从入门到放弃",
//   isFee:"fee",
//   price:"82.5",
//   statusId:"0",
//   putWay:"0"
// }]
export default {
  name: "LuboCourse",
  data() {
    return {
      activeIndex: '1',
      tableData: [],
      pageAndlike:{
        currentPage:'1',
        sizePage:'2',
        totalPage:'',
        courseStatus:'',
        uid:''
      }
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(rows) {
      //删除的前提是需要先把该课程下架，才能删除。
      //alert(JSON.stringify(rows))
      if (rows.status === 1){
        //1代表着下架状态
      }else {
        this.$message('请先下架此课程！！!');
      }
      //rows.splice(index, 1);
    },
    handleAdd(){
      this.$router.push({
        path:"/addCourse"
      });
    },
    open(index) {
      //如果传过来参数为2 那么就是审核通过的
      if (index === 2) {
        this.pageAndlike.courseStatus=0;
        this.queryfindAll();
      }
      if (index === 3){
        //如果传过来参数为3 那么就是审核中
        this.pageAndlike.courseStatus=2;
        this.queryfindAll();
      }
      if (index === 4){
        //如果传过来参数为4 那么就是审核失败
        this.pageAndlike.courseStatus=4;
        this.queryfindAll();
      }
    },
    handleSizeChange(val) {
      this.pageAndlike.sizePage=val;
      this.queryfindAll();
      //console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageAndlike.currentPage=val;
      this.queryfindAll();
      //console.log(`当前页: ${val}`);
    },
    queryfindAll(){
      this.$axios.post("course-person/aaa/course/findcourse",qs.stringify(this.pageAndlike)).then(r=>{
       // alert(JSON.stringify(r.data.obj));
        this.tableData=r.data.obj.records;
        this.pageAndlike.totalPage=r.data.obj.total;
      })
    },
    allCourse(){
      this.pageAndlike.courseStatus='';
      this.queryfindAll();
    }
  },
  mounted(){

    //获取到uid 根据uid 去查询当前教师的课程
      this.pageAndlike.uid = sessionStorage.getItem("uid");
    //alert(JSON.stringify(this.pageAndlike));
      this.queryfindAll();

  }
}
</script>

<style scoped>

</style>
